<!--
* @description 
* @fileName compare.vue
* @author huangyu
* @date 2022/05/20 11:37:37
!-->
<template>
    <div class="otor_content">
        <div class="otor_wrap border">
            <el-button type="primary" @click="clickZB">选择装备</el-button>
            <el-button type="primary" @click="clickClear" plain>清空对比</el-button>
        </div>
        <el-row :gutter="20" style="margin-top:20px;">
            <el-col v-for="(item,index) in list" :key="index" :span="6">
                <div style="background:#f2f2f2;padding:20px;min-height:480px;position: relative;">
                    <i class="el-icon-circle-close" style="position:absolute;top:-5px;right:-5px;cursor:pointer;" @click="clickClose(index)"></i>
                    <vDataDetail :model="item"></vDataDetail>
                </div>
            </el-col>
        </el-row>

        <el-dialog :visible.sync="dialogZBList" top="50px" width="1380px" title="选择装备" append-to-body>
            <vZBData @rowData="rowData" :isComponents="true"></vZBData>
        </el-dialog>
    </div>
</template>

<script>
import vZBData from "./data.vue"
import vDataDetail from "./dataDetail.vue"
export default {
    components: {vZBData,vDataDetail},
    data() {
        return {
            list: [],
            dialogZBList: false,
        }
    },
    mounted() {

    },
    methods: {
        clickZB(){
            if(this.list.length<4)
                this.dialogZBList = true
            else
                this.$message.error("最多只能对比4件装备！")
        },
        rowData(row){
            // console.log(row)
            this.list.push(row)
            this.dialogZBList = false
        },
        clickClear(){
            this.list = []
        },
        clickClose(index){
            this.list.splice(index,1)
        },
    },
}
</script>

<style scoped>
</style>